<template>
  <div class="map-block-root">
    <div class="cont">
      <div class="echart" style="height: 100%; width: 100%;"></div>
      <FullBtn class="btn" :zoomin="zoomin" 
        @zoomin="$emit('zoomin'), resize()"
        @zoomout="$emit('zoomout'), resize()"></FullBtn>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import FullBtn from '../common/FullBtn.vue'
import {sleep} from 'utils'

export default {
  name: 'map-block',
  components: {FullBtn},
  props: ['zoomin'],
  data(){
    return {
      chart: null
    }
  },
  mounted(){
    var el = this.$el.getElementsByClassName('echart')[0]
    fetch('./static/data-map.json').then(res => res.json())
    .then(res => {
      var geoCoordMap = res.geoCoordMap
      var mapStyle = res.mapStyle
      var BJData = res.BJData

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord]
            });
          }
        }
        return res
      }
      var color = '#12ccf8'
      //三个配置依次是，拖尾，线和飞机，终点
      var option = {
        bmap: {
          center: [106, 38.5],
          zoom: 5,
          roam: true,
          mapStyle: mapStyle
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'bmap',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: color,
            symbolSize: 6
          },
          lineStyle: {
            normal: {
              color: color,
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(BJData)
        },{
          type: 'lines',
          coordinateSystem: 'bmap',
          zlevel: 2,
          symbol: ['none', 'arrow'],
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: color,
              width: 1,
              opacity: 0.6,
              curveness: 0.2
            }
          },
          data: convertData(BJData)
        },{
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 8;
          },
          itemStyle: {
            normal: {
              color: color
            }
          },
          data: BJData.map(function (dataItem) {
            return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          })
        }]
      }
      this.chart = echarts.init(el)
      this.chart.setOption(option)
    })
  },
  methods: {
    async resize(){
      await sleep(100)
      this.chart.resize()
    }
  }
}
</script>

<style lang="stylus">
.anchorBL
  display none
</style>

<style scoped lang="stylus">
.map-block-root
  border-style solid
  border-width 38px 41px
  border-image url(./img/map-border.png) 38 41
  border-image-outset 9px
  box-sizing border-box
  >.cont
    background rgba(0,0,0,.3)
    position absolute
    top -26px
    left -29px
    right -29px
    bottom -26px
    >.btn
      position absolute
      top 20px
      right 20px
</style>